<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>react</title>
  </head>
  <body>
    <div id="root"></div>

    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.js"></script>

    <script type="text/babel">
      /*
        当 loading 为 true，渲染 正在加载中...
        当 loading 为 false，渲染 数据结果
      */
      // 创建React元素
      const loading = true;

      // let element;
      // if (loading) {
      //   element = <div>正在加载中...</div>;
      // } else {
      //   element = <div>数据结果</div>;
      // }

      // const element = loading ? <div>正在加载中...</div> : <div>数据结果</div>;

      // const element = <div>{loading ? "正在加载中..." : "数据结果"}</div>;
      
      // { JS表达式 }
      // a && b 
      // 首先判断a是否为true，如果是true，直接返回b，如果不是，直接返回a
      const element = loading && <div>正在加载中...</div>;
      
      // 结论：
      // 一个或多个元素需要切换显示：条件渲染
      // 如果只是一个元素切换，可以使用 &&
      // 如果只是两个元素切换，可以三元表达式
      // 如果是三个元素以上切换，可以if & else-if & else
      // 渲染React元素
      ReactDOM.createRoot(document.getElementById("root")).render(element);
    </script>
  </body>
</html>
